<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>管理员列表</title>
  <meta name="description" content="用户列表">
  <meta name="keywords" content="table">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="icon" type="image/png" href="${staticHost }/back/i/favicon.png">
  <link rel="apple-touch-icon-precomposed" href="${staticHost }/back/i/app-icon72x72@2x.png">
  <meta name="apple-mobile-web-app-title" content="Amaze UI" />
  <link rel="stylesheet" href="${staticHost }/back/css/amazeui.min.css"/>
  <link rel="stylesheet" href="${staticHost }/back/css/admin.css">
  <link rel="stylesheet" href="${staticHost }/css/font-awesome.min.css"/>
</head>
<body>
	<!--[if lte IE 9]>
	<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
	  以获得更好的体验！</p>
	<![endif]-->
	<c:import url="../commons/header.jsp" />
	<div class="am-cf admin-main">
	  <c:import url="/back/menu" />
	  <!-- content start -->
	  <div class="admin-content">
	
	    <div class="am-cf am-padding">
	      <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">系统设置</strong> / <small>菜单管理</small></div>
	    </div>
	
	    <div class="am-g">
	      <div class="am-u-sm-12 am-u-md-1">
	        <div class="am-btn-toolbar">
	          <div class="am-btn-group am-btn-group-xs">
	            <!-- <a type="button" class="am-btn am-btn-default" ><span class="am-icon-plus"></span> 新增</a> -->
	            <button
				  type="button"
				  class="am-btn am-btn-primary"
				  data-am-modal="{target: '#menu-add-panel', closeViaDimmer: 0, width: 800, height: 525}" id="add-mune-btn">
				  	新增
				</button>
	          </div>
	        </div>
          </div>
	      <form action="" method="get">
	      <div class="am-u-sm-12 am-u-md-4">
	      	<div class="am-u-sm-4 am-u-md-3 am-text-right">
            	角色
            </div>
	        <div class="am-form-group">
	          <select data-am-selected="{btnSize: 'sm'}" class="search-role" name="roleId">
	            <option value="0">---所有角色---</option>
	            <c:forEach var="role" items="${roles }">
	            <option value="${role.id }" <c:if test="${role.id == roleId }">selected="selected"</c:if>>${role.name }</option>
	            </c:forEach>
	          </select>
	        </div>
	      </div>
	      <div class="am-u-sm-12 am-u-md-2">
	        <div class="am-input-group am-input-group-sm">
	          <span class="am-input-group-btn">
	          	<input type="submit" class="am-btn am-btn-default" value="搜索" />
	            <!-- <s class="am-btn am-btn-default" id="sub-btn" type="button">搜索</button> -->
	          </span>
	          <span class="am-input-group-btn">
	            <a class="am-btn am-btn-default" type="button" href="menuList">取消</a>
	          </span>
	        </div>
	      </div>
	      </form>
	    </div>
		<hr data-am-widget="divider" style="" class="am-divider am-divider-default" />
	    <div class="am-g">
	      <ul class="am-list admin-sidebar-list">
	      <c:forEach var="menu" items="${requestScope.menus }" varStatus="status">
      		<li <c:if test="${menu.isLeaf == 0 }">class="admin-parent"</c:if>>
      			<c:if test="${menu.isLeaf == 1 }">
      				<div style="height: 40px;margin-left: 10px;"><i class="${menu.icon }"></i> ${menu.name } 
      					<div class=" am-margin-right am-fr">
			                  <div class="am-btn-group am-btn-group-xs">
			                    <a class="am-btn am-btn-default am-btn-xs am-text-secondary menu-edit-btn" href="javascript:;" data-id="${menu.id }" data-index="${menu.index }" data-name="${menu.name }" data-pid="${menu.parentId }" data-url="${menu.url }" data-icon="${menu.icon }"><span class="am-icon-pencil-square-o"></span> 编辑</a>
			                    <a class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only menu-delete" data-id="${menu.id }"><span class="am-icon-trash-o"></span> 删除</a>
			                  </div>
      					</div>
      				</div>
      			</c:if>
      			<c:if test="${menu.isLeaf == 0 }">
      				<div style="height: 40px; margin-top: 10px;margin-left: 10px;" class="am-cf">
			          	<span class="${menu.icon }"></span> ${menu.name } 
			          	<div class="am-margin-right am-fr">
			          		<div class="am-btn-group am-btn-group-xs">
			                    <a class="am-btn am-btn-default am-btn-xs am-text-secondary menu-edit-btn" href="javascript:;" data-id="${menu.id }" data-index="${menu.index }" data-name="${menu.name }" data-pid="${menu.parentId }" data-url="${menu.url }" data-icon="${menu.icon }"><span class="am-icon-pencil-square-o"></span> 编辑</a>
			                    <a class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only menu-delete" data-id="${menu.id }"><span class="am-icon-trash-o"></span> 删除</a>
			                  </div>
			          	</div>
			        </div>
      				<ul class="am-list am-collapse admin-sidebar-sub am-in">
      					<c:forEach var="cmenu" items="${menu.menus }">
      						<li><div style="height: 40px; margin-top: 10px;margin-left: 10px;"><i class="${cmenu.icon }"></i> ${cmenu.name }
      								<div class="am-margin-right am-fr">
      									<div class="am-btn-group am-btn-group-xs">
						                    <a class="am-btn am-btn-default am-btn-xs am-text-secondary menu-edit-btn" href="javascript:;" data-id="${cmenu.id }" data-index="${cmenu.index }" data-name="${cmenu.name }" data-pid="${cmenu.parentId }" data-url="${cmenu.url }" data-icon="${cmenu.icon }"><span class="am-icon-pencil-square-o"></span> 编辑</a>
						                    <a class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only menu-delete" data-id="${cmenu.id }"><span class="am-icon-trash-o"></span> 删除</a>
						                </div>
      								</div>
      							</div>
      						</li>
      					</c:forEach>
			        </ul>
      			</c:if>
      	</c:forEach>
		</ul>
	    </div>
	  </div>
	  <!-- content end -->
	</div>
	
	<a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>
	<c:import url="../commons/footer.jsp" />
	<!-- 添加弹出窗 -->
	<div class="am-modal am-modal-no-btn" tabindex="-1" id="menu-add-panel">
	  <div class="am-modal-dialog">
	    <div class="am-modal-hd">添加菜单
	      <a href="javascript: void(0)" class="am-close am-close-spin" id="menu-add-panel-close" data-am-modal-close>&times;</a>
	    </div>
	    <div class="am-modal-bd">
	      <form class="am-form" id="menu-form" action="saveMenu" method="post">
	        	<input type="hidden" name="id" id="menu-id" /> 
	          <div class="am-g am-margin-top">
	            <div class="am-u-sm-4 am-u-md-2 am-text-right">
	              	名称
	            </div>
	            <div class="am-u-sm-6 am-u-md-6 am-u-end col-end">
	              <input type="text" name="name" id="menuname" class="am-input-sm">
	            </div>
	            <!-- <div class="am-hide-sm-only am-u-md-4">*必填，不可重复</div> -->
	          </div>
	          <div class="am-g am-margin-top">
	            <div class="am-u-sm-4 am-u-md-2 am-text-right">
	             	 链接地址
	            </div>
	            <div class="am-u-sm-8 am-u-md-6 am-u-end col-end">
	              <input type="text" name="url" id="menuurl" class="am-input-sm">
	            </div>
	          </div>
			  <div class="am-g am-margin-top">
		          <div class="am-u-sm-4 am-u-md-2 am-text-right">父节点</div>
		          <div class="am-u-sm-4 am-u-md-6 am-u-end col-end">
		            <select id="pid-select" name="parentId">
		            	<option value="0">根节点</option>
		            	<c:forEach var="menu" items="${requestScope.menus }">
		            		<option value="${menu.id }">${menu.name }</option>
		            	</c:forEach>
				    </select>
		          </div>
		       </div>
	          <div class="am-g am-margin-top">
	            <div class="am-u-sm-4 am-u-md-2 am-text-right">
	              	图标
	            </div>
	            <div class="am-u-sm-8 am-u-md-6 am-u-end col-end">
	              <input type="text" name="icon" id="menuicon" class="am-input-sm">
	            </div>
	          </div>
	          <div class="am-g am-margin-top">
	            <div class="am-u-sm-4 am-u-md-2 am-text-right">
	              	排序
	            </div>
	            <div class="am-u-sm-8 am-u-md-6 am-u-end col-end">
	              <input type="text" name="index" id="menuindex" class="am-input-sm">
	            </div>
	          </div>
	        </form>
	        <div class="am-margin">
			    <button type="button" class="am-btn am-btn-primary am-btn-xs" id="sub-btn">提交保存</button>
			    <button type="button" class="am-btn am-btn-primary am-btn-xs" id="close-btn">放弃保存</button>
			</div>
	    </div>
	  </div>
	</div>
	<!--[if lt IE 9]>
	<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
	<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
	<script src="${staticHost }/back/js/amazeui.ie8polyfill.min.js"></script>
	<![endif]-->
	
	<!--[if (gte IE 9)|!(IE)]><!-->
	<script src="${staticHost }/back/js/jquery.min.js"></script>
	<!--<![endif]-->
	<script src="${staticHost }/back/js/amazeui.min.js"></script>
	<script src="${staticHost }/back/js/app.js"></script>
	<script src="${staticHost }/back/js/manage/menu.js"></script>
</body>
</html>